<template lang="pug">
.ListWrap 
  transition
    .header(v-if="$store.state.plishow")
      p.iconfont.icon-fanhui(@click="routback")
      p.title 评论详情
      p.seek.iconfont.icon-sousuo
  .main(v-if="list.length")
    .main_head
      img.main_head_img(:src="list[0].userimg")
      .main_head_title
        p.title {{ list[0].username }}
        p.date {{ list[0].time.split("T")[0] }}
    .main_foot
      span.foot_text {{ list[0].content }}
      .foot_img(v-for="item,index in list[0].covers")
        img(:src="item", alt="alt" @click="ok(list[0].covers,index)")
</template>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
import { ImagePreview } from 'vant';

export default {
  props: {
    item:{
      type: Object,
    }
  },
  data() {
    return {
      list: [],
    };
  },
  methods: {
    fn(arr) {
      return (arr = arr.map((item) => {
        if (item.covers != null) {
          return {
            id: item.id,
            covers: item.covers.split(","),
            userimg: item.userimg,
            time: item.time,
            username: item.username,
            content: item.content,
            type: item.type,
          };
        } else {
          return {
            id: item.id,
            covers: null,
            userimg: item.userimg,
            time: item.time,
            username: item.username,
            content: item.content,
            type: item.type,
          };
        }
      }));
    },
    routback(){
      this.$router.go(-1)
    },
    ok(data,index){
      ImagePreview({images:data,startPosition:index})
    }
  },
  created() {
    this.$http
      .get("http://192.168.43.168:8082/user/userto?id="+this.$route.query.id)
      .then(({ data }) => {
      this.list = this.fn(data);
      console.log(this.list);
    });
  },
  mounted(){
    this.$store.commit('setplishow',true)
  },  
  beforeDestroy(){
    this.$store.commit('setplishow',false)
  }
};
</script>
<style lang="sass">
$bg: rgb(242,242,242)
.ListWrap
  width: 3.75rem
  .header
    width: 100%
    height: .5rem
    position: fixed
    left: 0
    top: 0
    display: flex
    justify-content: space-between
    background: $bg
    text-align: center
    line-height: .5rem
    font-size: .15rem
    padding: 0 .1rem
  .main
    width: 100%
    margin-top: .6rem
    .main_head
      width: 100%
      height: .5rem
      display: flex
      align-items: center
      .main_head_img
        margin-right: .24rem
        width: .45rem
        height: .45rem
        overflow: hidden
        border-radius: 100%
        margin-left: .15rem
      .main_head_title
        width: 2.9rem
        height: 100%
        p
          text-align: left
          font-size: .14rem
        p+p
          margin-top: .08rem
          line-height:none
            font-size: .1rem
    .main_foot
      width: 100%
      margin-top: .1rem
      .foot_text
        font-size: .145rem
      .foot_img
        width: 100%
        margin-top: .15rem
        img
          width: 100%
  .v-enter
    transform: translateY(-100%)
  .v-enter-active
    transition: .5s
  .v-leave-to
    transform: translateY(0%)
  .v-leave-active
    transition: .5s
</style>
